<template>
  <div class="mine">
    <!--  -->
    <div class="header_box">
      <div class="info_box">
        <img src="@/assets/gxuser.png" v-if="info.avatar == ''" />
        <img :src="info.avatar" v-else />
        <div v-if="info.nickname == ''">匿名用户</div>
        <div v-else>{{ info.nickname }}</div>
      </div>
      <!-- <div class="wx_item" @click="show = true">公众号</div> -->
    </div>
    <div class="book_h" @click="toUrl">查看预约记录</div>
    <!-- 公众号 -->
    <van-popup v-model="show" @click="show = false">
      <img :src="codeImg" class="popImg" />
    </van-popup>
    <!-- 导航栏 -->
    <div class="nav-item">
      <div class="navs" @click="toMine">
        <img src="@/assets/icon1.png" />
        <div>预约</div>
      </div>
      <div class="navs navs-a">
        <img src="@/assets/icon2-a.png" />
        <div>预约记录</div>
      </div>
    </div>
  </div>
</template>
<script>
import { memberInfo, wechatLogin } from "@/api/apiData";
import { Popup, Toast } from "vant";
export default {
  components: {
    [Popup.name]: Popup,
    [Toast.name]: Toast,
  },
  data() {
    return {
      show: false,
      codeImg: "",
      ticket: "",
      info: "",
      id: "",
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 获取用户信息
    getInfo() {
      memberInfo().then((res) => {
        if (res.code == 10000 || res.code == 20003) {
          this.getConfig();
        } else if (res.code == 1) {
          this.info = res.data;
        } else {
          Toast(res.msg);
        }
      });
    },
    getConfig() {
      getWxConfig().then((res) => {
        if (res.code == 1) {
          this.appid = res.data.appId;
          this.checkWeChatCode();
        } else {
        }
      });
    },
    //检查浏览器地址栏中微信接口返回的code
    checkWeChatCode() {
      let code = this.getUrlCode("code");
      if (code) {
        this.getOpenidAndUserinfo(code);
      } else {
        this.wxLogin();
        // this.getInfo()
      }
    },
    getOpenidAndUserinfo(code) {
      wechatLogin({ code: code }).then((res) => {
        if (res.code == 1) {
          localStorage.setItem("token", res.data.token);
          this.getInfo();
        } else {
        }
      });
    },
    wxLogin() {
      let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
      // let appid = "wx0d3c07901732c258";
      let appid = this.appid;
      //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
      let href =
        "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" +
        appid +
        "&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" +
        local +
        "#wechat_redirect";
      console.log(href);
      window.location.href = href;
    },
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    // 获取二维码
    getCode() {
      getPath({ posid: 4 }).then((res) => {
        if (res.code == 1) {
          this.codeImg = res.data.path;
        } else {
          Toast.fail(res.msg);
        }
      });
    },
    toMine() {
      let id = this.$route.query.id;
      this.$router.replace({
        path: "/index",
        query: {
          id: id,
        },
      });
    },
    toUrl() {
      let id = this.$route.query.id;
      this.$router.replace({
        path: "/bookList",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style scoped>
.header_box {
  background: #12D5B4;
  padding: 7% 10%;
  color: #fff;
  position: relative;
}
.info_box {
  display: flex;
  align-items: center;
}
.info_box img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
.wx_item {
  position: absolute;
  right: 0;
  background: #afbe9f;
  padding: 0 20px;
  font-size: 12px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  top: 50%;
  height: 25px;
  line-height: 25px;
  margin-top: -12.5px;
}
.book_h {
  width: 94%;
  line-height: 2.5;
  background: #12D5B4;
  margin: 130px auto;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.popImg {
  width: 100%;
}
</style>